<template>
	<el-col v-if="componentModel.bigScreen==undefined ||componentModel.bigScreen==false" :span="componentModel.col" style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" :id="componentModel.id">
	</el-col>
	<el-col :span="componentModel.col*6" v-else
		style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);"
		class="panel">
		<div :id="componentModel.id" style="width: 100%;height:200px;"></div>
		<div class="panel-footer"></div>
	</el-col>
</template>

<script>
	import * as echarts from 'echarts';
	import utils from '@/utils/utils.js';
	export default {
		name: "GaugeComponent",
		props: ["componentModel"],
		data() {
			return {
				myChart: null
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.myChart = echarts.init(document.getElementById(this.componentModel.id));
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var value = prop["value"];
				if (value != undefined) {
					this.option = {
						title:{
							text:this.componentModel.title,
							subtext:this.componentModel.subtitle
						},
						series: [{
							name: 'Pressure',
							type: 'gauge',
							min:this.componentModel.min,
							max:this.componentModel.max,
							detail: {
								formatter: '{value}'
							},
							data: [{
								value:value
							}]
						}]
					};
					this.myChart.setOption(this.option,true);
				}
			}
		},
	}
</script>

<style>
</style>
